프론트엔드 스쿨 멋쟁이사자처럼 프론트엔드 스쿨 2기 17_Day 1. 이미지 포맷 포맷 컬러 표현 용량 애니메이션 투명 그림자 특징 GIF 256색 작음 압축률 안 좋음 JPG/JPEG 24비트 컬러 작음 압축률 좋음 PNG 32비트 트루컬러 반투명 처리 가능 SVG 좋음 모양 복잡에 비례 벡터 그래픽 형식 WebP 매우 좋음 매우 작음 압축률 매우 좋음 AVIF 매우 좋음 작음 지원 브라우저 적음 최신 확장자를 사용 할 때는 위에 소스코드 처럼 기본적으... 멋쟁이사자처럼프론트엔드 스쿨CSSCSS 멋쟁이사자처럼 프론트엔드 스쿨 2기 16_Day 1. 커스텀 input, select box 1. 커스텀 input, select box 1) input box custom 웹접근성을 고려하여 input 태그를 IR 기법으로 숨기고 label 태그를 스타일링 하는 방법이 있습니다. 단순하게 이미지를 삽입하는 방법보다 더 나은 코드라고 볼 수 있습니다. 2) select box custom select box도 위에 input box와 마찬... 멋쟁이사자처럼프론트엔드 스쿨CSSCSS HTML/CSS 기본 32일차 flex box는 1차원 공간에서의 직선 정렬 부모와 자식관계에서만 flex 적용가능 flex container : 아이템들을 감싸는 부모영역 flex item : 내부에 정렬을 위해 담아놓은 아이템들 내부 - 자식의 레이아웃 방식 설정, flex, grid wrap : 여러 행에 걸쳐서 배치, 시작점은 flex-direction에 의해 결정, 자기의 원래 크기를 잃지 않기 위해 wrappi... 프론트엔드 스쿨HTML/CSS 기본HTML/CSS 기본 멋쟁이사자처럼 프론트엔드 스쿨 2기 15_Day 1. CSS 설계 기법 1. CSS 설계 기법 1) OOCSS (Object Oriented CSS) 🕵️♀️ OOCSS란? UI에 있는 것들을 모두 객체로 생각하고 여러가지 모듈로 만들어 조립하는 기법입니다. 같은 형태의 UI 에 스킨만 다르다면 구조와 스킨을 분리하여 조합 합니다. 구조에 해당하는 btn 클래스에는 width, height, padding, margin 등 레이아웃에 영... 멋쟁이사자처럼프론트엔드 스쿨CSSCSS 멋쟁이사자처럼 프론트엔드 스쿨 2기 13_Day 1. flex 2. grid 1. flex flex-grow는 flex 아이템의 여백 비율을 정할 수 있는 속성입니다. flex-shrink 는 flex 아이템의 줄어드는 비율을 정할 수 있는 속성입니다. flex-basis 는 flex 아이템의 크기를 정합니다. 위에 2행에 있는 사진처럼 중심축 기준으로 grow 비율을 뺀 너비가 basis 사이즈입니다. 맨 오른쪽에 있는 사진처럼 flex... 멋쟁이사자처럼프론트엔드 스쿨CSSCSS HTML/CSS 기본 31일차 다수의 스타일을 자동으로 재생될 수 있도록 만듬 key frame이라는 걸로 애니매이션 세트를 만들어놓고 갖다씀 user의 특정 액션에 의해서 스타일 변경됨 액션하지 않으면 스타일 변경X animation은 user의 액션 없어도 계속 움직임 A B C D 로 움직이는 하나의 세트를 만들수 있음 2개일 때는 from, to로 작성 2개이상은 %로 작성 transition-porperty에 대... 프론트엔드 스쿨HTML/CSS 기본HTML/CSS 기본 멋쟁이사자처럼 프론트엔드 스쿨 2기 11_Day 첫 번째 사진처럼 자식 요소들이 전부 float 속성일 경우, 부모는 자식 요소들의 높이를 인식 할 수 없다! ✍ 참고 내용: 형제 요소 모두 float이 되어 있다면, 1번 부모가 자식 요소의 높이를 인식할 수 없는 문제가 발생합니다. 형제 요소 중에 float으로 지정된 요소가 있고 없는 요소가 있다면 2번 문제가 발생합니다. 부모 요소에 overflow:hidden;을 추가. 부모 요소... 멋쟁이사자처럼프론트엔드 스쿨CSSCSS 자료구조/알고리즘 (JavaScript ver.) 14일차 .apply에서는 두 번째 인자로 배열을 받고, 그 배열을 각각의 인자로 배정해서 계산을 가능하게 해줌 (Math.000 메소드에서는 this 역할이 없기 때문에 첫번째 인자에 들어가는 값은 중요하지 않음) 0~1 사이의 랜덤값을 출력하기 때문에 정수로 뽑고 싶다면 10을 곱하고 parseInt() 쓰기 if문 삼항연산자 true false가 나오는 비교 ? 참일때 : 거짓일때 for문 x를... 자료구조/알고리즘 (JavaScript ver.)프론트엔드 스쿨자료구조/알고리즘 (JavaScript ver.) 자료구조/알고리즘 (JavaScript ver.) 15일차 month는 1월에 1이 아니라 1월(0) ~ 12월(11) 시간 뒤에 z가 붙는 거는 UCT 기준시간이라는 것 (영국), 우리나라랑 9시간 차이남 new Date.UTC(2022,2,20) UTC 메서드를 통해 UTC 보정 할 수 있음 .getDay() 요일 일(0) ~ 토(6) .getTime() 현재시간을 밀리세컨드로 바꿔줌 new Date(date.getTime()) 밀리세컨드를 다시... 자료구조/알고리즘 (JavaScript ver.)프론트엔드 스쿨자료구조/알고리즘 (JavaScript ver.) 자료구조/알고리즘 (JavaScript ver.) 13일차 제일 먼저 5의 배수가 아닌 경우 거르기 5의 배수인데, 총 금액을 넘어서는 경우 거르기 (1번 2번 순서 바꿔도 상관없으나 이게 더 깔끔함) 그외는 다 5의 배수이면서 총 금액을 넘지않는 경우만 남기 때문에 true x좌표 4개중 2개 2개씩 같음 why? 직사각형이기 때문에 평행해야해서 3개만 밝혀졌으니 1개만 다른 값을 찾으면 그게 4번째 좌표... 자료구조/알고리즘 (JavaScript ver.)프론트엔드 스쿨자료구조/알고리즘 (JavaScript ver.) 멋쟁이사자처럼 프론트엔드 스쿨 2기 3_Day 형상 관리 핵심툴인 Git과 GitHub. 1) git clone 2) git pull 3) git add 4) git commit 5) git push 1) git clone git clone <repository 주소> 2) git pull git pull은 다른 사람이 git push를 진행한 경우, 저장소에서 소스코드와 데이터들을 가져올 때 사용합니다. git pull <원격 저장소 ... 프론트엔드 스쿨githubCSS멋쟁이사자처럼htmlCSS 멋쟁이사자처럼 프론트엔드 스쿨 2기 4_Day 인라인 요소와 블록 레벨 요소 부모 요소의 속성값을 상속받아 사용합니다. 컨텐츠는 우측에 정렬되어 있으며, margin:auto를 사용하게 되면 좌우 마진이 균등하게 들어가기 때문에 컨텐츠가 가운데에 올 수 있습니다. 인라인 요소의 경우, 컨텐츠 만큼만 공간을 차지하기 때문에 위치 이동이 되지 않습니다. 위에서 말씀드린 것처럼 <p>요소가 중앙 정렬이 된 것이 아니라, 블럭 레벨 요소 안에 ... 프론트엔드 스쿨CSS멋쟁이사자처럼htmlCSS HTML/CSS 기본 26일차 block요소에 적용 가능 첫번째 줄 앞부분 들여쓰기 자식에게 상속됨 block 요소에만 적용 css 단축속성 shorthand underline, color, style, thickness 순서는 상관없음 underline overline 글씨 위 줄 line-through 글씨 중간, 취소선 thickness solid 실선 double 두줄 dotted 점선 dashed 긴 점선 몇가지... HTML/CSS 기본프론트엔드 스쿨HTML/CSS 기본 자료구조/알고리즘 (JavaScript ver.) 11일차 object 보다 다양한 자료형을 key로 제공 데이터에 접근하기 위해 obj.key 또는 obj[key] 같은 구문을 사용할 수 없음 객체의 값을 가져오기 위해서는 map.get(key) 구문 이용 맵.keys() key retrun 맵.values() value retrun iterable 하여 for of 구문 사용가능 어떤 메소드도 호출하지 않고 객체 그대로 넘기게 되면 [key,va... 프론트엔드 스쿨자료구조/알고리즘 (JavaScript ver.)자료구조/알고리즘 (JavaScript ver.) HTML/CSS 기본 23일차 html 요소의 상태에 따라서 변경할 수 있는 동적 가상 선택자 요소는 하난데 사용자의 동작에 따라서 스타일을 변경할 수 있는 것 ex) 어떤 요소위에 마우스를 올리거나, 커서를 클릭해서 포커스를 맞춘다거나 자바스크립트 말고도 css로 만으로 스타일 변경할 수 있음 user가 마우스를 올리거나 클릭할 거 같은 대상들에 적용 ex) 링크, 메뉴, 버튼, input창 링크를 한번도 클릭한 적이 ... 프론트엔드 스쿨HTML/CSS 기본HTML/CSS 기본
멋쟁이사자처럼 프론트엔드 스쿨 2기 17_Day 1. 이미지 포맷 포맷 컬러 표현 용량 애니메이션 투명 그림자 특징 GIF 256색 작음 압축률 안 좋음 JPG/JPEG 24비트 컬러 작음 압축률 좋음 PNG 32비트 트루컬러 반투명 처리 가능 SVG 좋음 모양 복잡에 비례 벡터 그래픽 형식 WebP 매우 좋음 매우 작음 압축률 매우 좋음 AVIF 매우 좋음 작음 지원 브라우저 적음 최신 확장자를 사용 할 때는 위에 소스코드 처럼 기본적으... 멋쟁이사자처럼프론트엔드 스쿨CSSCSS 멋쟁이사자처럼 프론트엔드 스쿨 2기 16_Day 1. 커스텀 input, select box 1. 커스텀 input, select box 1) input box custom 웹접근성을 고려하여 input 태그를 IR 기법으로 숨기고 label 태그를 스타일링 하는 방법이 있습니다. 단순하게 이미지를 삽입하는 방법보다 더 나은 코드라고 볼 수 있습니다. 2) select box custom select box도 위에 input box와 마찬... 멋쟁이사자처럼프론트엔드 스쿨CSSCSS HTML/CSS 기본 32일차 flex box는 1차원 공간에서의 직선 정렬 부모와 자식관계에서만 flex 적용가능 flex container : 아이템들을 감싸는 부모영역 flex item : 내부에 정렬을 위해 담아놓은 아이템들 내부 - 자식의 레이아웃 방식 설정, flex, grid wrap : 여러 행에 걸쳐서 배치, 시작점은 flex-direction에 의해 결정, 자기의 원래 크기를 잃지 않기 위해 wrappi... 프론트엔드 스쿨HTML/CSS 기본HTML/CSS 기본 멋쟁이사자처럼 프론트엔드 스쿨 2기 15_Day 1. CSS 설계 기법 1. CSS 설계 기법 1) OOCSS (Object Oriented CSS) 🕵️♀️ OOCSS란? UI에 있는 것들을 모두 객체로 생각하고 여러가지 모듈로 만들어 조립하는 기법입니다. 같은 형태의 UI 에 스킨만 다르다면 구조와 스킨을 분리하여 조합 합니다. 구조에 해당하는 btn 클래스에는 width, height, padding, margin 등 레이아웃에 영... 멋쟁이사자처럼프론트엔드 스쿨CSSCSS 멋쟁이사자처럼 프론트엔드 스쿨 2기 13_Day 1. flex 2. grid 1. flex flex-grow는 flex 아이템의 여백 비율을 정할 수 있는 속성입니다. flex-shrink 는 flex 아이템의 줄어드는 비율을 정할 수 있는 속성입니다. flex-basis 는 flex 아이템의 크기를 정합니다. 위에 2행에 있는 사진처럼 중심축 기준으로 grow 비율을 뺀 너비가 basis 사이즈입니다. 맨 오른쪽에 있는 사진처럼 flex... 멋쟁이사자처럼프론트엔드 스쿨CSSCSS HTML/CSS 기본 31일차 다수의 스타일을 자동으로 재생될 수 있도록 만듬 key frame이라는 걸로 애니매이션 세트를 만들어놓고 갖다씀 user의 특정 액션에 의해서 스타일 변경됨 액션하지 않으면 스타일 변경X animation은 user의 액션 없어도 계속 움직임 A B C D 로 움직이는 하나의 세트를 만들수 있음 2개일 때는 from, to로 작성 2개이상은 %로 작성 transition-porperty에 대... 프론트엔드 스쿨HTML/CSS 기본HTML/CSS 기본 멋쟁이사자처럼 프론트엔드 스쿨 2기 11_Day 첫 번째 사진처럼 자식 요소들이 전부 float 속성일 경우, 부모는 자식 요소들의 높이를 인식 할 수 없다! ✍ 참고 내용: 형제 요소 모두 float이 되어 있다면, 1번 부모가 자식 요소의 높이를 인식할 수 없는 문제가 발생합니다. 형제 요소 중에 float으로 지정된 요소가 있고 없는 요소가 있다면 2번 문제가 발생합니다. 부모 요소에 overflow:hidden;을 추가. 부모 요소... 멋쟁이사자처럼프론트엔드 스쿨CSSCSS 자료구조/알고리즘 (JavaScript ver.) 14일차 .apply에서는 두 번째 인자로 배열을 받고, 그 배열을 각각의 인자로 배정해서 계산을 가능하게 해줌 (Math.000 메소드에서는 this 역할이 없기 때문에 첫번째 인자에 들어가는 값은 중요하지 않음) 0~1 사이의 랜덤값을 출력하기 때문에 정수로 뽑고 싶다면 10을 곱하고 parseInt() 쓰기 if문 삼항연산자 true false가 나오는 비교 ? 참일때 : 거짓일때 for문 x를... 자료구조/알고리즘 (JavaScript ver.)프론트엔드 스쿨자료구조/알고리즘 (JavaScript ver.) 자료구조/알고리즘 (JavaScript ver.) 15일차 month는 1월에 1이 아니라 1월(0) ~ 12월(11) 시간 뒤에 z가 붙는 거는 UCT 기준시간이라는 것 (영국), 우리나라랑 9시간 차이남 new Date.UTC(2022,2,20) UTC 메서드를 통해 UTC 보정 할 수 있음 .getDay() 요일 일(0) ~ 토(6) .getTime() 현재시간을 밀리세컨드로 바꿔줌 new Date(date.getTime()) 밀리세컨드를 다시... 자료구조/알고리즘 (JavaScript ver.)프론트엔드 스쿨자료구조/알고리즘 (JavaScript ver.) 자료구조/알고리즘 (JavaScript ver.) 13일차 제일 먼저 5의 배수가 아닌 경우 거르기 5의 배수인데, 총 금액을 넘어서는 경우 거르기 (1번 2번 순서 바꿔도 상관없으나 이게 더 깔끔함) 그외는 다 5의 배수이면서 총 금액을 넘지않는 경우만 남기 때문에 true x좌표 4개중 2개 2개씩 같음 why? 직사각형이기 때문에 평행해야해서 3개만 밝혀졌으니 1개만 다른 값을 찾으면 그게 4번째 좌표... 자료구조/알고리즘 (JavaScript ver.)프론트엔드 스쿨자료구조/알고리즘 (JavaScript ver.) 멋쟁이사자처럼 프론트엔드 스쿨 2기 3_Day 형상 관리 핵심툴인 Git과 GitHub. 1) git clone 2) git pull 3) git add 4) git commit 5) git push 1) git clone git clone <repository 주소> 2) git pull git pull은 다른 사람이 git push를 진행한 경우, 저장소에서 소스코드와 데이터들을 가져올 때 사용합니다. git pull <원격 저장소 ... 프론트엔드 스쿨githubCSS멋쟁이사자처럼htmlCSS 멋쟁이사자처럼 프론트엔드 스쿨 2기 4_Day 인라인 요소와 블록 레벨 요소 부모 요소의 속성값을 상속받아 사용합니다. 컨텐츠는 우측에 정렬되어 있으며, margin:auto를 사용하게 되면 좌우 마진이 균등하게 들어가기 때문에 컨텐츠가 가운데에 올 수 있습니다. 인라인 요소의 경우, 컨텐츠 만큼만 공간을 차지하기 때문에 위치 이동이 되지 않습니다. 위에서 말씀드린 것처럼 <p>요소가 중앙 정렬이 된 것이 아니라, 블럭 레벨 요소 안에 ... 프론트엔드 스쿨CSS멋쟁이사자처럼htmlCSS HTML/CSS 기본 26일차 block요소에 적용 가능 첫번째 줄 앞부분 들여쓰기 자식에게 상속됨 block 요소에만 적용 css 단축속성 shorthand underline, color, style, thickness 순서는 상관없음 underline overline 글씨 위 줄 line-through 글씨 중간, 취소선 thickness solid 실선 double 두줄 dotted 점선 dashed 긴 점선 몇가지... HTML/CSS 기본프론트엔드 스쿨HTML/CSS 기본 자료구조/알고리즘 (JavaScript ver.) 11일차 object 보다 다양한 자료형을 key로 제공 데이터에 접근하기 위해 obj.key 또는 obj[key] 같은 구문을 사용할 수 없음 객체의 값을 가져오기 위해서는 map.get(key) 구문 이용 맵.keys() key retrun 맵.values() value retrun iterable 하여 for of 구문 사용가능 어떤 메소드도 호출하지 않고 객체 그대로 넘기게 되면 [key,va... 프론트엔드 스쿨자료구조/알고리즘 (JavaScript ver.)자료구조/알고리즘 (JavaScript ver.) HTML/CSS 기본 23일차 html 요소의 상태에 따라서 변경할 수 있는 동적 가상 선택자 요소는 하난데 사용자의 동작에 따라서 스타일을 변경할 수 있는 것 ex) 어떤 요소위에 마우스를 올리거나, 커서를 클릭해서 포커스를 맞춘다거나 자바스크립트 말고도 css로 만으로 스타일 변경할 수 있음 user가 마우스를 올리거나 클릭할 거 같은 대상들에 적용 ex) 링크, 메뉴, 버튼, input창 링크를 한번도 클릭한 적이 ... 프론트엔드 스쿨HTML/CSS 기본HTML/CSS 기본